<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        div {
            padding: 8px;
            width: 180px;
        }

        .blue {
            background: blue;

        }

        .larger {
            font-size: 30px;
        }

        .green {
            background: green;
        }
    </style>
</head>

<body>
    <h3>css()方法设置元素样式</h3>
    <div id="conBlue" class="blue larger">天蓝色</div>
    <div id="conRed">大红色</div>
    <div id="remove" class="blue larger">天蓝色</div>

    <!--
        操作元素的样式
            attr("class") 获取元素的样式名
            attr("class","样式名") 设置元素的样式
            addClass("样式名") 添加样式
            css() 添加具体的样式
            removeClass("样式名") 移除样式
    -->
    <script src="js/jquery-3.4.1.js" type="text/javascript"></script>
    <script type="text/javascript">
        //attr("class") 获取元素的样式名
        let cla = $("#conBlue").attr("class");
        console.log(cla);
        //attr("class","样式名") 设置元素的样式
        $("#conBlue").attr("class", "green");
        //addClass("样式名")
        $("#conRed").addClass("red larger");
        let redcla = $("#conRed").attr("class");
        console.log(redcla);
        //添加具体的样式
        $("#conRed").css("font-size", "40px");
        $("#conRed").css({ "font-family": "楷体", "color": "black" });
        //removeClass("样式名") 移除样式
        $("#remove").removeClass("larger");
    </script>
</body>

</html>